<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<!-- v-if="firstLoaded || isCurrentPage" -->
		<z-paging v-if="firstLoaded || isCurrentPage" unit="px" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
			<!-- 自定义没数据时的展示 -->
			<template #empty>
				<image style="width: 460rpx; height: 324rpx;" src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/13.png"></image>
				<view style="font-size: 28rpx; color: #999999;">暂时没有更多数据</view>
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view v-for="(item, index) in dataList" :key="index">
				<!-- item组件根据UI进行编码 -->
				<!-- < :item="item" /> -->
				<!-- @paramsHandle="paramsHandle" -->
				<component :is="componentCurrent" :item="item" :info="info" :isClick="isClick" :currentIndex="currentIndex" :clickIndex="clickIndex" />
			</view>
			<!-- 自定义的没有更多数据view -->
				<template #loadingMoreNoMore>
					<view></view>
				</template>
		</z-paging>
	</view>
</template>

<script>
	import competitionModel from '../../pages/details/cps/model.vue';
	import competitionInfo from '../../pages/details/cps/info.vue';

	export default {
		components: {
			competitionModel,
			competitionInfo
		},
		data() {
			return {
				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				// 当前组件是否已经加载过了
				firstLoaded: false,
				// 是否滚动到当前页
				isCurrentPage: false,
			}
		},
		props:{
			info: {
				type: Object,
				default: () => {}
			},
			// 当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			// 当前组件
			componentCurrent: {
				type: String,
				default: function(){
					return ''
				}
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			clickIndex: {
				type: Number,
				default: 0
			},
			isClick: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						// 懒加载，当滑动到当前的item时，才去加载
						if(!this.firstLoaded){
							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
							this.$nextTick(() => {
								setTimeout(() => {
									this.isCurrentPage = true;
								},100);
							})
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			// 接收父组件传过来的刷新列表要求
			reload() {
				this.$nextTick(() => {
					// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
					this.$refs.paging && this.$refs.paging.reload();	
				})
			},
			// 接收父组件传过来的刷新列表要求-pageNo和pageSize不会重置，列表数据会重新从服务端获取。
			refresh() {
				this.$nextTick(() => {
					// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
					this.$refs.paging && this.$refs.paging.refresh();	
				})
			},
			getData (list) {
				this.$refs.paging.complete(list)
				this.firstLoaded = true;
			},
			queryList(page,limit) {
				console.log('滚动加载触发')
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					page: page,
					limit: limit
				}
				this.$emit('initData', params)
			}
		}
	}
</script>

<style>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
	}
</style>
